<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>一夜狼人杀</title>
    <div th:include="footer :: headBasic"></div>
</head>
<body>

<div class="panel-body">
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="/index"><span class="glyphicon glyphicon-home"></span></a></li>
        <li role="presentation" id="nav1" class="active"><a href="#">加入房间</a></li>
        <li role="presentation" id="nav2"><a href="#">创建房间</a></li>
    </ul>
    <!--<div class="input-group marginTop10">
        <span class="input-group-addon">房间名</span>
        <input type="text" class="form-control" id="roomName"/>
    </div>-->
    <div id="navDiv1" style="display: block;">
        <div class="input-group marginTop10">
            <span class="input-group-addon">房间号</span>
            <input type="text" class="form-control" value="" id="intoRoomName"/>
        </div>
        <div class="input-group marginTop10">
            <span class="input-group-addon">密码</span>
            <input type="password" class="form-control" value="" id="intoRoomPassword"/>
        </div>
        <div class="marginTop10">
            <button class="btn btn-success" type="button" id="intoRoomButton">
                进入房间
            </button>
        </div>
    </div>
    <div id="navDiv2" style="display: none;">
        <div class="input-group marginTop10">
            <span class="input-group-addon">密码</span>
            <input type="text" class="form-control" value="123" id="roomPassword"/>
        </div>
        <div class="panel panel-default marginTop10">
            <div class="panel-heading">请选择角色牌：</div>
            <div class="panel-body" id="roleCardList">
                <!--
                <button type="button" class="btn btn-default marginTop10">化身幽灵</button>
                <button type="button" class="btn btn-default marginTop10">狼人1</button>
                <button type="button" class="btn btn-default marginTop10">狼人2</button>
                <button type="button" class="btn btn-default marginTop10">预言家</button>
                <button type="button" class="btn btn-default marginTop10">强盗</button>
                <button type="button" class="btn btn-default marginTop10">捣蛋鬼</button>
                <button type="button" class="btn btn-default marginTop10">酒鬼</button>
                <button type="button" class="btn btn-default marginTop10">失眠者</button>
                <button type="button" class="btn btn-default marginTop10">守夜人*2</button>
                <button type="button" class="btn btn-default marginTop10">村民</button>
                <button type="button" class="btn btn-primary marginTop10">选中样式</button>
                -->
            </div>
        </div>
        <div class="marginTop10">
            <button class="btn btn-success" type="button" id="confirmCreateRoomButton">
                确认创建 <span class="badge" id="peopleCount"></span> 人的房间
            </button>
        </div>
    </div>
    <div class="marginTop10" style="color:red;" id="errorMsgDiv"></div>
</div>

</body>
</html>
<script src="/js/page/start.js"></script>
